<template>
  <jl-base>
    <jl-header>
      <mt-header title="工程要货单" :fixed="true">
        <i slot="right">
          <mt-button @click="drafts">草稿箱</mt-button>
          <mt-button @click="newNeed">新增</mt-button>
        </i>
      </mt-header>
    </jl-header>

    <jl-content>
      <div class="list_search_header">
        <input placeholder="搜索要货单号，客户姓名等，可模糊搜索" v-model="condition">
        <span @click="search">搜索</span>
      </div>

      <div class="qd_list" v-infinite-scroll="loadMore"
           :infinite-scroll-disabled="loading"
           :infinite-scroll-distance="10">
        <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="50">
          <template v-for="item in needGoods">
            <div class="qd_item" v-on:click="goModify(item)">
              <div class="qd_header bor_bottom">
                <div class="w12 qd_address"><em class="mr5">{{item['BZMC']}}</em>{{item['YHD01']}}</div>
                <div class="w12 mt10">
                  <span class="w06 tl"><i class="fa fa-user-circle mr5"></i>{{item['YHD07']}}</span>
                  <span class="w06 tr"><i class="fa fa-phone-square mr5"></i>{{item['YHD06']}}</span>
                </div>
                <div class="w12 mt10">
                  <span class="w06 tl">要货金额：<b class="font_red ml5 mr5">{{item['SUM_SPLB01'] | money}}</b>元</span>
                  <span class="w06 tr"><i class="fa fa-file-text mr5"></i>{{item['DLD01']}}</span>
                </div>
              </div>
              <div class="qd_body">
                <div class="w12 mt10" :class="{'Y':'font_green','N':'font_red'}[item['YHD15']]">
                  <h3 class="w06">{{item['YHD15MC']}}</h3>
                  <span class="w06 tr font_gray font_size_small">{{item['YHD11']}}</span>
                  <span class="w12 font_size_small">{{item['YHD21']}}</span>
                </div>
              </div>
            </div>
          </template>
        </mt-loadmore>
        <jl-bottom-loading :class="{'false':'hide'}[loading]"/>
      </div>

      <div class="tips_no_pro" v-if="this.needGoods.length <=  0">
        <div class="tips_no_main">
          <div class="w12 tc font_gray_ccc" style="font-size:50px;"><i class="fa fa-sticky-note-o"></i></div>
          <div class="w12 tc font_size_super mt20 font_gray_ccc">暂无要货单记录</div>
        </div>
      </div>
    </jl-content>
  </jl-base>
</template>

<script>

  export default {
    data() {
      return {
        needGoods: [],
        loading: false,
        page_num: 1,
        isEnd: false,
        condition: ''
      }
    },
    methods: {
      loadMore() {
        if (this.isEnd) return
        this.loading = true
        this.page_num++
        this.searchNeedGoods()
      },
      newNeed() {
        this.$router.push('/agent/need/new')
      },
      search() {
        this.page_num = 1;
        this.needGoods = [];
        this.searchNeedGoods();
      },
      searchNeedGoods() {
        new Promise((resolve, reject) => {
          this.$engineer.searchNeedGoods({page_num: this.page_num, condition: this.condition})
            .then(v => {
              let needGoods = v['needGoods'] || []
              if ($Utils.isNull(needGoods)) this.isEnd = true;
              Array.prototype.push.apply(this.needGoods, needGoods);
              this.loading = false
              this.$forceUpdate()
              resolve(v)
            })
            .catch(e => {
              this.loading = false
              resolve(e)
            })
        })
      },
      goModify(item) {
        this.$router.push({
          name: 'agent-need-new',
          params: {
            jlbh: item.JLBH,
            bdbh: item.BDBH,
          }
        })
      },
      drafts() {
        this.$router.push('/agent/need/Drafts')
      },
      loadTop() {
        this.page_num = 1;
        this.$engineer.searchNeedGoods({page_num: this.page_num})
          .then(v => {
            let needGoods = v['needGoods'] || [];
            if ($Utils.isNull(needGoods)) this.isEnd = true;
            this.needGoods = {...{}, ...needGoods};
            this.loading = false;
            this.$refs.loadmore.onTopLoaded();
            this.$forceUpdate();
          })
          .catch(e => {
            this.loading = false
          })
      }
    },
    activated() {
      this.needGoods = [];
      this.searchNeedGoods()
    }
  }
</script>

<style scoped>

</style>
